查看原文
其他

【第1184期】滴滴后市场前端技术体系

2018-01-30 wfpaopao 前端早读课

前言

从“上帝的视角”来看整个体系,今日早读文章由滴滴@wfpaopao授权分享。

正文从这开始~

经过两年的发展,作为汽车后市场各业务重要支撑的前端团队,随着业务的不断发展,从无到有,从基础到完善,沉淀了支撑业务的前端技术体系。

我们说的前端技术体系,指的是,我们在前端边界内,着眼于产出产品和服务的效率和质量,通过拆分和整合产出过程中的关键工作,最终所形成的一套包含代码,工具,理论,规范,文档等的支撑体系。

前端技术体系概括

对于前端边界,我们认为划分的界限,不在于具体的细分技术,而在于职责,简单来说,如果一项开发工作是为了向用户提供可交互的界面,那这就是前端的工作范畴。

与设计团队之间,根据不同的业务场景,制定相应的交互,视觉规范,根据实际产品需求,产出产品交互,视觉稿/原型,这属于设计团队的工作。而对设计团队所产出的不同业务场景下的交互,视觉标准,抽象底层组件接口,进而使用抽象组件,实现不同业务的组件库,最终形成前端的组件体系,进而使用组件体系开发产品,甚至提供搭建工具,让产品,运营人员独立操作生成可交互界面,这些属于前端团队的工作。

与设计团队边界

与后端团队之间,根据产品需求,实现业务逻辑,提供业务维度的原子化接口,这属于后端团队的工作。而提供页面访问服务,控制页面路由,提供可交互界面,消费业务接口,组装页面,甚至提供交互维度的接口,这些属于前端团队的工作。

与后端团队边界

与客户端团队之间,提供代码运行容器,扩展需求可枚举的系统接口,这属于客户端团队的工作。而选择,创建开发工具,于各种客户端容器之上,抽象统一编程接口,基于统一编程接口,产出需求不可枚举的交互界面,这些属于前端团队的工作。

与客户端团队边界

以上前端边界的划分,除了让相关团队职责清晰,降低沟通成本外,带来的额外好处是,配合模式的变化和固化,使得前端团队在与设计,后端,客户端等团队的配合中,始终属于消费者角色,有利于各团队之间的工作并行,并且前端从产品到服务,形成了一个独立闭环,灵活性更好,有利于体验优化工作的开展。

前端边界与配合模式

在以上前端边界内,前端团队关注的是产品的整个生命周期,而在整个生命周期内,我们的关键工作分为应用、代码、工程三个重要部分。

前端关键工作划分

应用方面,总的来说,我们希望提供给用户高可用的服务,从而保证我们产品的用户体验。我们关注前后端分离,客户端容器,差异性收敛,监控和容灾这几个方面。

应用体系

前后端分离方面,我们通过引入一个中间层,来提供页面访问服务。这个中间层,由前端维护,我们对页面请求,页面路由,页面渲染等有完整的控制能力,甚至我们可以基于它实现接口聚合,数据模拟等功能,这些使我们更容易实现页面性能优化,提升用户体验。在整个实施过程中,我们采用,先分离,后优化的策略,保证了整体的稳定性。

客户端容器方面,除了常规的Webview类容器,我们在实际项目中尝试了React-Native, Weex等自定义容器,以解决Webview性能问题。在与微信小程序场景契合度比较高的一些产品,我们也尝试开发了微信小程序应用。我们致力于,在可控的客户端环境内,选用性能更好的客户端容器,从而优化产品体验。同时我们也致力于统一不同容器的使用体验,收敛差异性,降低维护成本。

差异性收敛方面,不同客户端容器有着不同的工作模式,为了降低维护成本,我们需要从业务中,总结实践经验,抽象通用模式,并开发相关的辅助工具,最终将差异性进行收敛。在React-Native的开发过程中,我们提供一套使用体验与Webview完全一致的客户端容器,从而前端对于React-Native项目的发布,更新机制可以完全复用Web类项目。

监控和容灾方面,我们利用公司的日志系统和监控系统,对线上问题进行预警,通过静态资源进行前端服务器和CDN双备,服务多实例等部署策略以及代码级的灰度策略等,加上公司的配置平台做开关,最终形成监控和容灾的基本模式。

代码方面,我们的产出分为前端代码,服务端渲染代码,前端代码最终生成可交互界面,后端代码最终作为服务,响应页面请求,处理页面渲染。对于两种代码,我们都有规范化的代码体系,并且通常情况下,在所有业务中我们都套用这个体系。从而收敛问题,提高产出效率。

对于前端代码,我们主要采用数据驱动的编程模式,组件化的开发方式,配合数据管理,路由管理的基本思路进行业务开发。细节性的来说,我们最终的前端代码体系由基础库和第三方库,组件库,展示组件,容器组件和数据仓库,路由管理这几部分构成。

前端代码体系

对于服务端渲染代码,我们主要使用多进程的请求响应并发模式,采用中间件的请求处理模式,通过将请求路由到具体的控制器,通过控制器中配置的中间件,进行数据的拉取和页面的拼装,最终完成请求响应。

服务端渲染代码体系

代码层面上的细节,每一个展开来说,都会有很长篇幅,比如说组件库的代码设计。对于细节这里我们不做展开,以后找机会再做具体分享。

工程方面,在项目的评审,开发,联调,测试,上线,运营各个环节,我们提供相应的工具支持,以及标准操作流程和文档,从而保证各个环节的产出质量和效率,以及各个环节之间过渡的平滑性。

简单来说,在项目评审阶段,我们提供了使用体验一致的针对不同场景的项目模板;在项目开发阶段,我们提供了开发,调试,单元测试,风格校验等工具;在项目联调测试阶段,我们提供了打包,部署工具,以及前端代码运行环境的docker容器;在项目上线阶段,我们提供了代码打包,部署工具。同时,我们提供了一套cli交互工具,来保证操作的易用性和规范性。

工程体系

以上是对滴滴后市场前端技术体系的整体概括,其中的很多细节都可以单独展开来说,比如如何创建组件体系,如何优化React-Native使用体验,React,Vue体系下,做数据直出,还是页面直出等,我们会尽量找机会再跟大家分享。

最后,为你推荐

【第1183期】这些 CSS 命名规范,将省下你大把调试时间

【第1179期】在微信、微博、QQ、Safari唤起App的解决方案

【第1058期】美团旅行前端技术体系的思考与实践

关于本文
作者:@wfpaopao
原文:https://juejin.im/post/5a3dd19b6fb9a0452846b159

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存